/**
 * Button 组件产生页面
 */
import React from 'react';
import {
  Text,
  StyleSheet,
  TouchableOpacity,
} from 'react-native';

const OpacityButton = ({
  onPress = () => {},
  color = '#108eeb',
  radius = 5,
  activeOpacity = 0.2,
  wrapperStyle,
  textStyle,
  icon,
  children,
  iconRight,
  ...props
}) => {
  return (
    <TouchableOpacity
      activeOpacity={activeOpacity}
      onPress={onPress}
      style={[
        styles.wrapper,
        {
          backgroundColor: color,
          borderRadius: radius,
        },
        wrapperStyle,
      ]}
      {...props} >
      {/* <Icon name="delete" size={20} color="#e91e61" /> */}
      {iconRight ? null : icon}
      {/* put text directly in the component tag */}
      {children &&
        <Text
          style={[
            styles.text,
            (children && icon && !iconRight) && { marginLeft: 6 },
            iconRight && { marginRight: 6 },
            textStyle]}>
          {children}
        </Text>
      }
      {iconRight ? icon : null}
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  wrapper: {
    paddingVertical: 8,
    paddingHorizontal: 18,
    elevation: 3,
    flexDirection: 'row',
    justifyContent: 'center',
  },

  text: {
    color: '#fff',
    fontSize: 16,
    textAlign: 'center',
  },
});

export default OpacityButton;
